.wrap{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //min-width: 1680px;
  margin: 0;
  padding: 0;
  @media (max-width: 1680px) {
    overflow-y: auto;
    overflow-x: scroll;
  }
}
.hmiddle{
  float: left;
  display: table;
  height: 100%;
  width: 20%;
  min-width: 150px;
  @media (max-width: 1920px) {
    font-size: 17px;
  }
  @media (max-width: 1680px) {
    font-size: 16px;
  }
  @media (max-width: 1440px) {
    font-size: 14px;
  }
  @media (max-width: 1366px) {
    font-size: 13px;
  }
  @media (max-width: 1024px) {
    font-size: 10px;
  }
  font-weight: bold;
  cursor: pointer;
  div{
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    color: #b6b6b6;
    &:hover{
      color: #FFFFFF;
      padding-top: 5px;
      box-sizing: border-box;
      border-bottom: 5px solid white;
    }
    span{
      width: 22px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
//头部
.header{
  width: 100%;
  min-width: 1680px;
  height: 75px;
  background: linear-gradient(#57667d, #4a5569, #353e4d);
  border-bottom: 2px solid #242833;
  .header_left{
    width: 20%;
    //min-width: 380px;
    float: left;
    height: 100%;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    font-family: 华文细黑;
    .hleft_main{
      width: 100%;
      height: 100%;
      display: table;
      @media (max-width: 1920px) {
        font-size: 20px;
      }
      @media (max-width: 1680px) {
        font-size: 18px;
      }
      @media (max-width: 1440px) {
        font-size: 16px;
      }
      @media (max-width: 1366px) {
        font-size: 14px;
      }
      @media (max-width: 1024px) {
        font-size: 10px;
      }
      div{
        width: 100%;
        height: 100%;
        text-align: center;
        .hleft_main_1{
          width: 20%;
          height: 100%;
          display: inline-block;
          background: url("../../img/警徽.png") no-repeat center center;
          vertical-align: middle;
        }
        .hleft_main_2{
          width: 20%;
          @media (max-width: 1024px) {
            width: 15%;
          }
          height: 100%;
          display: inline-block;
          cursor: pointer;
          background: url("../../img/返回首页.png") no-repeat center center;
          vertical-align: middle;
        }
      }
    }
  }
  .header_middle{
    width: 40%;
    min-width: 625px;
    @media (max-width: 1024px) {
      width: 44%;
    }
    float: left;
    height: 100%;
    .hmiddle_item{
      .divHover{
        color: #FFFFFF;
        padding-top: 5px;
        box-sizing: border-box;
        border-bottom: 5px solid white;
      }
    }
    .hmiddle_item:nth-child(1){
      span{
        background: url("../../img/分析.png") no-repeat;
      }
      &:hover{
        & span{
          background: url("../../img/分析拷贝2.png") no-repeat;
        }
      }
      .hmiddle;
    }
    .hmiddle_item:nth-child(2){
      span{
        background: url("../../img/自定义分析2.png") no-repeat;
      }
      &:hover{
        & span{
          background: url("../../img/自定义分析.png") no-repeat;
        }
      }
      .hmiddle;
    }
    .hmiddle_item:nth-child(3){
      span{
        background: url("../../img/统计分析2.png") no-repeat;
      }
      &:hover{
        & span{
          background: url("../../img/统计分析.png") no-repeat;
        }
      }
      .hmiddle;
    }
    .hmiddle_item:nth-child(4){
      span{
        background: url("../../img/统计分析2.png") no-repeat;
      }
      &:hover{
        & span{
          background: url("../../img/统计分析.png") no-repeat;
        }
      }
      .hmiddle;
    }

  }
  .header_right{
    width: 30%;
    min-width: 470px;
    @media (max-width: 1024px) {
      width: 36%;
    }
    float: right;
    height: 100%;
    display: table;
    div{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      span{
        line-height: 28px;
        margin-right: 20px;
        color: #b6b6b6;
      }
      .hright_item4{
        width: 28px;
        height: 28px;
        background: no-repeat url("../../img/天气/多云.png") center center;
        margin-right: 5px;
      }
      .hright_item5{
        margin-right: 30px;
      }
      .hright_item6{
        width: 28px;
        height: 28px;
        background: no-repeat url("../../img/人员-实.png") center center;
        margin-right: 2px;
      }
      .hright_item7{
        margin-right: 7px;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
        ul{
          min-width: 50px;
          background-color: #f5f5f5;
          li{
            text-align: center;
            &:hover{
              background: #000000;
            }
          }
        }
        &:hover{
          span{
            color: white;
          }
        }
      }
    }
  }
}



//左侧按钮选中样式
.left-active{
  border-left: 5px solid #fff221;
  box-shadow: 0 0 10px #000000;
  color: white!important;
  padding-left: 0px!important;
}
.left-active2{
  border-left: 5px solid #3247ff;
  box-shadow: 0 0 10px #000000;
  color: white!important;
  padding-left: 0px!important;
}
.left-active3{
  border-left: 5px solid #ff423a;
  box-shadow: 0 0 10px #000000;
  color: white!important;
  padding-left: 0px!important;
}

//主体
.main{
  width: 100%;
  min-width: 1680px;
  height: calc(~"(100% - 75px)");
  .main-left {
      width: 16%;
      height: 100%;
      background-color: #323a47;
      float: left;
      overflow: auto;
      //滚动条
      .gdt;
      .left-nav {
        width: 99%;
        height: 100%;
        padding: 0px;
        padding-top: 10px;
        list-style: none;
        margin-left: 1%;
        margin-right: 0px;

        div{
          width: 99%;
          cursor: pointer;
          color: #888987;
          font-size: 18px;
          font-weight: bold;
          align-items: center;
          margin-left: 1%;
          display: flex;
          height: 45px;
          align-items: center;
          /*&:hover{
            border-left: 5px solid #fff221;
            box-shadow: 0 0 10px #000000;
            color: white;
            padding-left: 0px;
          }*/
          span{
            width: 20px;
            height: 22px;
            display: block;
            margin-left: 25px;
          }
          p{
            margin-left: 15px;
            height: 22px;
            margin-bottom: 0px;
          }

        }

      }
    }
  .main-right{
      width: 84%;
      min-width: 1300px;
      height: 100%;
      float: left;
      .mright-title{
        width: 100%;
        height: 40px;
        background: #eeeeee;
        font-size:15px;
        color:black;
        letter-spacing:0.5em;
        overflow: hidden;
        position: relative;
        .first{
          margin-left: 15px;
        }
        span{
          height:40px;
          background: #eeeeee;
          text-align:center;
          display:inline-block;
          line-height:40px;
          position:relative;
          margin-left:42px;
          color: #5e5e5e;
          cursor: pointer;
          s{
            width:0px;
            height:0px;
            border:20px solid #eeeeee;
            border-left-color: transparent;
            _border-left-color: snow;
            _filter: chroma(color=snow);
            font-size:0;
            line-height:0;
            position:absolute;
            left:-40px;
            top:0px;}
          b{
            width:0px;
            height:0px;
            border:20px solid #d4d4d4;
            border-left-color: #eeeeee;
            font-size:0;
            line-height:0;
            position:absolute;
            top:0px;
            right:-40px;}
        }

        .last{
          background: #339b4e;
          color: white;
          s{
            border:20px solid #339b4e;
            border-left-color: transparent;
            _border-left-color: snow;
            _filter: chroma(color=snow);
          }
          b{
            border:20px solid #eeeeee !important;
            border-left-color: #339b4e !important;
          }
        }
        .shadow{
          color: #eeeeee!important;
          s{
            left: -52px!important;
          }
          b{
            border: none!important;
          }
        }
        div{
          width: 60px;
          height: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
          position: absolute;
          top:0;
          right: 0;
          letter-spacing: 0;
          color: #5f5f5f;
          &:hover{
            i{
              background: url("../../img/返回-2.png") no-repeat;
            }
          }
          i{
            width: 22px;
            height: 18px;
            background: url("../../img/返回-1.png") no-repeat;
          }
        }
      }
      .mright-content{
        padding: 0 20px;
        width: 100%;
        height: calc(~"(100% - 40px)");
        box-sizing: border-box;
        border: 2px solid #d4d4d4;
        display: flex;
        align-items: center;
        justify-content: center;
        .zsl-show{
          width:100%;
          height:100%;
          min-width: 1380px;

        }


      }
    }
}


.li-active{
  border: 2px solid red;
  border-radius: 13px;
  span:nth-child(3){
    &:after{
      content:'\2716';
    }
    border: 1px solid red;
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: white;
    color: gray;
    border-radius: 10px;
    top: -7px;
    left: 72px;
    text-align: center;
    line-height: 18px;
  }
}



//loading动画
@-webkit-keyframes loading {
  from {opacity: 1;width:12px;height:12px;}
  to {opacity: 0.5;width:7px;height:7px;}
}
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(255,255,255,0.2);
  .spinner {
    position: absolute;
    top:40%;
    left:50%;
    display: inline-block;
    div {
      width:12px;
      height:12px;
      background: #000000;
      border:1px solid #000000;
      position: absolute;
      left: 100%;
      top: 100%;
      opacity: 0;
      -webkit-animation: loading 2s linear infinite;
      -webkit-border-radius: 25px;
    }
    .bar1 {-webkit-transform:rotate(0deg) translate(0, -30px); -webkit-animation-delay: -0s;}
    .bar2 {-webkit-transform:rotate(30deg) translate(0, -30px); -webkit-animation-delay: -1.8334s;}
    .bar3 {-webkit-transform:rotate(60deg) translate(0, -30px); -webkit-animation-delay: -1.6668s;}
    .bar4 {-webkit-transform:rotate(90deg) translate(0, -30px); -webkit-animation-delay: -1.5002s;}
    .bar5 {-webkit-transform:rotate(120deg) translate(0, -30px); -webkit-animation-delay: -1.3336s;}
    .bar6 {-webkit-transform:rotate(150deg) translate(0, -30px); -webkit-animation-delay: -1.167s;}
    .bar7 {-webkit-transform:rotate(180deg) translate(0, -30px); -webkit-animation-delay: -1.0004s;}
    .bar8 {-webkit-transform:rotate(210deg) translate(0, -30px); -webkit-animation-delay: -0.8338s;}
    .bar9 {-webkit-transform:rotate(240deg) translate(0, -30px); -webkit-animation-delay: -0.6672s;}
    .bar10 {-webkit-transform:rotate(270deg) translate(0, -30px); -webkit-animation-delay: -0.5006s;}
    .bar11 {-webkit-transform:rotate(300deg) translate(0, -30px); -webkit-animation-delay: -0.334s;}
    .bar12 {-webkit-transform:rotate(330deg) translate(0, -30px); -webkit-animation-delay: -0.1674s;}
  }
}







//滚动条
.gdt{
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar
  {
    width: 8px;  /*滚动条宽度*/
    height: 10px;  /*滚动条高度*/
    background-color: rgba(0, 0, 0, 0.3);
  }

  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track
  {
    /*滚动条的背景区域的内阴影*/
    box-shadow:0px 1px 3px rgba(0,0,0,0) inset;

    /*滚动条的背景区域的圆角*/
    border-radius: 5px;

    /*滚动条的背景颜色*/
    background-color:rgba(0,0,0,0);
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb
  {
    /*滚动条的内阴影*/
    box-shadow:0px 1px 3px rgb(0, 0, 0) inset;

    /*滚动条的圆角*/
    border-radius: 5px;
    /*滚动条的背景颜色*/
    background-color: #151c22;
  }
}
